<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
        }
        .out-img{
            width: 100vw;
            position: relative;
            z-index: 999;
        }
        .preview-img{
            width: 100vw;
            height: 100vh;
            position: fixed;
            z-index: 1300;
            left: 0;
            top: 0;
            background-color: #000;
        }
        .preview-img .preview-hd{
            width: 100%;
            height: 44px;
            color: #fff;
            position: fixed;
            z-index: 1380;
        }
        .preview-img .show-wrapper{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .preview-img .show-container{
            width: auto;
            height: 100%;
            position: relative;
            z-index: 1350;
            display: flex;
            justify-content: flex-start;
        }
        .preview-img .show-box{
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
        }
        .preview-img .show-box img{
            max-width: 100vw;
            max-height: 100vh;
        }
    
    </style>
</head>
<body>
    <div id="root">
        <img class="out-img" @click="showimg" src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C1%2C600%2C396%3Bc0%3Dbaike80%2C5%2C5%2C80%2C26/sign=555c93571fce36d3b64bd97007c316b6/b3b7d0a20cf431adc5062cb44136acaf2fdd9862.jpg" alt="">
        <div class="preview-img" v-show="previewBox">
            <div class="preview-hd">
                <i class="iconfont"></i>
            </div>
            <div class="show-wrapper">
                <div class="show-container">
                    <div class="show-box">
                        <img src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C1%2C600%2C396%3Bc0%3Dbaike80%2C5%2C5%2C80%2C26/sign=555c93571fce36d3b64bd97007c316b6/b3b7d0a20cf431adc5062cb44136acaf2fdd9862.jpg" alt="">
                    </div>
                    <div class="show-box">
                        <img src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C1%2C600%2C396%3Bc0%3Dbaike80%2C5%2C5%2C80%2C26/sign=555c93571fce36d3b64bd97007c316b6/b3b7d0a20cf431adc5062cb44136acaf2fdd9862.jpg" alt="">
                    </div>
                    <div class="show-box">
                        <img src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C1%2C600%2C396%3Bc0%3Dbaike80%2C5%2C5%2C80%2C26/sign=555c93571fce36d3b64bd97007c316b6/b3b7d0a20cf431adc5062cb44136acaf2fdd9862.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        window.onload = function(){
            var t = 20;
            var timp = "";
            var root = new Vue({
                el:"#root",
                data:{
                    previewBox:false,
                    maxWidth:"",
                    currentIndex:0,
                },
                methods:{
                    showimg(){
                        this.previewBox = !this.previewBox;
                    },
                    startLoop(){
                        timp = setInterval(()=>{
                            var ele = document.querySelector('.show-container');
                            t += 20;
                            console.log(t);
                            ele.style.left= "-"+t+"px"
                        },200)
                    },
                    stopLoop(){
                        clearInterval(timp)
                    }
                },
                mounted:function(){
                    //手势分析手在右边 left max  - min > 0 ====图片右滑  left 增值
                    //               right  < 0 ===图片左滑   left 小职
                    //计算轮播最大距离
                    var _this = this;
                    var ele = document.querySelector('.show-container');  
                    var screentWidth = document.body.clientWidth;
                    var SectionArr = renderNode();
                    this.maxWidth = ele.clientWidth;
                    var startPos = 0;
                    var endPos = 0;
                    var chaVal = 0;
                    ele.addEventListener('touchstart',function(e){
                        startPos = e.changedTouches[0].clientX;
                    },false)
                    ele.addEventListener('touchmove',function(e){
                        endPos = e.changedTouches[0].clientX;
                        chaVal = endPos - startPos;
                        var currentLeft = SectionArr[_this.currentIndex];
                        var realLeft = Number(currentLeft) + Number(chaVal);
                        ele.style.left = realLeft +"px";
                    },false)
                    ele.addEventListener('touchend',function(e){
                        startPos = "";
                        endPos = "";
                        var leftVal = findSection(SectionArr,chaVal);
                        ele.style.transition = ".3s linear";
                        ele.style.left = "-"+leftVal + "px";
                        setTimeout(function(){
                            ele.style.transition = "";
                        },305)
                    },false);
                    //生成节点区间
                    function renderNode(){
                        var eleLengt = document.querySelectorAll('.show-box').length;
                        var fVal = 0;
                        var renderArr = [0];
                        var max_width = document.body.clientWidth;
                        for(var i = 0;i < (eleLengt - 1);i++){
                            fVal = fVal + max_width;
                            renderArr.push(fVal)
                        }
                        return renderArr
                    }
                    //找出在哪个区间
                    function findSection(SectionArr,val){
                        var screentWidth = document.body.clientWidth;
                        var isZheng = val < 0;
                        var val = Math.abs(val);
                        var leftVal = "";
                        var currentIdx = _this.currentIndex;
                        if (val > (screentWidth / 2)) { //满足切换条件
                            isZheng ?  currentIdx ++ : currentIdx--;
                        }else{  //不满足切换条件
                            currentIdx = currentIdx;
                        }
                        if (currentIdx == -1) {
                            currentIdx = 0;
                        }else if(currentIdx == SectionArr.length){
                            currentIdx = SectionArr.length - 1;
                        }
                        _this.currentIndex = currentIdx;
                        return SectionArr[currentIdx]
                    }
                }
            })
        }
    </script>
</body>
</html>